<template>
  <div class="comment">
    <div class="left">
      <div class="pic">
        <van-image
        fit
        :src="commentInfo.aut_photo"
      />
      </div>
    </div>
    <div class="right">
      <van-cell :title="commentInfo.aut_name">
        <van-button 
        type="default" 
        :icon="commentInfo.is_liking ? 'good-job' : 'good-job-o'"
        @click="addLike"
        :loading="loadingStatus"
        :class="{color: commentInfo.is_liking}">
        {{commentInfo.like_count || '赞'}}
        </van-button>
      </van-cell>
      <p class="content">{{commentInfo.content}}</p>
      <div class="bottom">
        <span>{{commentInfo.pubdate | dateFormat}}</span>
        <van-button type="default" @click="$emit('clickReplay',commentInfo)">{{commentInfo.reply_count}}回复</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {addLikeCommentAPI, delLIkeCommentAPI} from '@/api'
export default {
  props:{
    commentInfo:{
      type: Object,
      required: true
    }
  },
data(){
  return {
    title: '123',
    loadingStatus: false
  }
},
methods: {
  async addLike(){
    this.loadingStatus = true
    let count = this.commentInfo.like_count
    try {
      if(this.commentInfo.is_liking) {
      //已点赞，取消点赞
        await delLIkeCommentAPI(this.commentInfo.com_id)
        count--
        this.commentInfo.like_count = count < 0 ? 0 : count
      }
      else {
        // 进行点赞
        await addLikeCommentAPI(this.commentInfo.com_id)
        count++
        this.commentInfo.like_count = count
      }
      this.commentInfo.is_liking = !this.commentInfo.is_liking
    } catch (error) {
      console.log(error);
      this.$toast('操作错误，请稍后重试！')
    }
    this.loadingStatus = false
  },
  //点击回复评论
  replyComment(){
    console.log('点击回复');
  }
}
}
</script>

<style scoped lang="less">
.comment {
  display: flex;
  padding: 0 28px 40px 30px;
  border-bottom: 1px solid #c1c1c1;
  margin-bottom: 40px;
  .left {
    overflow: hidden;
    width: 72px;
    height: 72px;
    border-radius: 50%;
  }
  .right{
    flex: 1;
    margin-left: 25px;
    .van-cell{
      padding: unset;
      justify-content: space-between;
      align-items: center;
      font-size: 26px;
      .van-button{
        border: unset;
        width: unset;
        &.color{
        color: #e74033 !important
      }
      }
      &::after{
        border-bottom: unset;
      }
      .van-button--normal{
        padding: unset;
      }
      .van-cell__title {
        color: #406599;
      }
    }
    .content{
      margin-top: 34px;
      font-size: 30px;
      color: #222;
    }
     /deep/ .bottom{
      display: flex;
      align-items: center;
      height: 48px;
      margin-top: 39px;
      font-size: 19px;
      color: #222;
      .van-button{
        height: 100%;
        width: 135px;
        border-radius: 24px;
        background-color: #f4f5f6;
        font-size: 23px;
        margin-left: 25px;       
      }
      .van-button--normal{
          padding: unset;
        }
      
    }
  }
}
</style>